/**
 * @fileoverview
 * Custom rendering logic for the image mashup application
 */
 

CustomGeneFinderRenderer = function() {};
CustomGeneFinderRenderer.prototype = new flyui.genefinder.DefaultRenderer();

// try overriding something
CustomGeneFinderRenderer.prototype._renderResultsSummary = function( query, count ) {
	var content = "<small>showing ";
	content += count;
	content += " matching gene";
	content += (count == 0 || count > 1) ? "s " : " ";
	content += "from <a href='http://www.flybase.org'>www.flybase.org</a> for query '"+query+"'...</small>";
	this._resultsSummaryPane.innerHTML = content;
};

/* *******************************************************
 * custom flyted rendering
 * *******************************************************
 */

/**
 * TODO doc me
 * @class
 * @constructor
 */
CustomFlytedRenderer = function( renderPane ) {
	
	var that = this;
	
	/** @private */
	this._containerPane = renderPane;
	
	/**
	 * @private
	 */
	this._onStateChanged = function( oldState, newState ) {
		if ( newState == "PENDING" ) {
			flyui.mvcutils.show(that._pendingPane);
			flyui.mvcutils.hide(that._messagePane);
			flyui.mvcutils.hide(that._resultsSummaryPane);
			flyui.mvcutils.hide(that._resultsPane);
		} 
		else if (newState == "READY") {
			flyui.mvcutils.hide(that._pendingPane);
			flyui.mvcutils.hide(that._messagePane);
			flyui.mvcutils.show(that._resultsSummaryPane);
			flyui.mvcutils.show(that._resultsPane);		
		}
		else if ( newState == "SERVERERROR" || newState == "UNEXPECTEDERROR" ) {
			flyui.mvcutils.hide(that._pendingPane);
			flyui.mvcutils.show(that._messagePane);
			flyui.mvcutils.hide(that._resultsSummaryPane);
			flyui.mvcutils.hide(that._resultsPane);			
		} 
		else {
			// this should never happen
			throw {name:"flyui.flyted.ImageWidget.UnexpectedStateError", message:"Invalid state: "+newState};
		}
	};

	/**
	 * @private
	 */
	this._onQueryChanged = function( oldQuery, newQuery ) {
		// store query
		that._query = newQuery;
	};
	
	
	/**
	 * @private
	 */
	this._onResultsChanged = function( oldResults, newResults ) {
		// render the results summary
		that._renderResultsSummary(that._query, newResults.length);
		
		if (newResults.length > 0) {
			
			// set the content
			that._resultsPane.innerHTML = CustomFlytedRenderer.imagesToDivHTML(newResults);	

		}
		else {
			that._resultsPane.innerHTML = "";
		}
	};
	
	
	/**
	 * @private
	 */
	this._onErrorMessageChanged = function( oldMsg, newMsg) {
		that._messagePane.innerHTML = newMsg;
	};
	
	
	/**
	 * @private
	 */
	this._init = function() {
		
		// set up the pending pane
		this._pendingPane = document.createElement("div");
		this._pendingPane.innerHTML = "<p>Pending...</p>";
		this._containerPane.appendChild(this._pendingPane);
		flyui.mvcutils.hide(this._pendingPane);
		
		// set up the message pane
		this._messagePane = document.createElement("div");
		this._messagePane.innerHTML = "this should never be displayed";
		this._containerPane.appendChild(this._messagePane);
		flyui.mvcutils.hide(this._messagePane);
		
		// setup results summary pane
		this._resultsSummaryPane = document.createElement("p");
		this._containerPane.appendChild(this._resultsSummaryPane);
		flyui.mvcutils.hide(this._resultsSummaryPane);
		
		// setup results pane
		this._resultsPane = document.createElement("div");
		this._containerPane.appendChild(this._resultsPane);
		flyui.mvcutils.hide(this._resultsPane);

	};
	
	// do initialisation
	this._init();
	
};


/**
 * TODO doc me
 */
CustomFlytedRenderer.prototype.connect = function( model ) {
	model.addListener("STATE", this._onStateChanged);
	model.addListener("QUERY", this._onQueryChanged);
	model.addListener("RESULTS", this._onResultsChanged);
	model.addListener("ERRORMESSAGE", this._onErrorMessageChanged);
};


CustomFlytedRenderer.prototype._renderResultsSummary = function( query, count ) {
	var content = "found ";
	content += count;
	content += " matching image";
	content += (count == 0 || count > 1) ? "s " : " ";
	content += "from <a href='http://www.fly-ted.org'>www.fly-ted.org</a> for ";
	if (query instanceof flyui.flybase.Gene) {
		content += "gene <strong>"+query.symbols.join(" / ")+"</strong>";
		var ftnames = flyui.flyted.GeneNameMappings.flybaseToFlyted[query.flybaseID];
		if (typeof ftnames == "undefined" || !ftnames) {
			content += " (no mapping found to FlyTED gene names";
		}
		else if (ftnames.length == 1) {
			content += " (mapped to FlyTED gene name <strong><a href='http://www.fly-ted.org/view/geneid/"+ftnames[0]+".html'>"+ftnames[0]+"</a></strong>";			
		}
		else if (ftnames.length > 1) {
			content += "(mapped to FlyTED gene names ";
			for (var i=0; i<ftnames.length; i++) {
				content += "<strong><a href='http://www.fly-ted.org/view/geneid/"+ftnames[i]+".html'>"+ftnames[i]+"</a></strong>";
				if (i < ftnames.length) content += ", ";
			}
		}		
		content += ", N.B. gene name mappings may contain errors, check source data carefully)";
	} else {
		content += 	"query '"+query+"'";
	}
	this._resultsSummaryPane.innerHTML = content;
}


/**
 * TODO doc me
 */
CustomFlytedRenderer.imagesToDivHTML = function( images ) {
	
	// build the divs
	
	var content = "";
	for ( var i in images ) {
		
		content += CustomFlytedRenderer.imageToDivHTML(images[i]);
		log ("Generate the img div" + content, "test");	
	}
	
	return content;
};


/**
 * TODO doc me
 */
CustomFlytedRenderer.imageToDivHTML = function( image ) {
 	
 	//TODO include the caption
 	
 	var content = 	"<div class=\"result\">";
	content +=			"<p><a href=\"" + image.flytedURL + "\">";
	content +=				"<img src=\"" + image.thumbnailURL + "\" alt=\"this is an image\">";
	content +=			"</img></a></p>"; 
	content +=			"<p>"+image.caption+"</p>"
	content +=		"</div>";
	
	return content;
};


/* *******************************************************
 * custom bdgp rendering
 * *******************************************************
 */
 
 
 
/**
 * TODO doc me
 * @class
 * @constructor
 */
CustomBdgpRenderer = function( renderPane ) {
	var that = this;
	
	/** @private */
	this._containerPane = renderPane;
	
	this._onStateChanged = function (oldState, newState) {
		if ( newState == "PENDING" ) {
			flyui.mvcutils.show(that._pendingPane);
			flyui.mvcutils.hide(that._messagePane);
			flyui.mvcutils.hide(that._resultsSummaryPane);
			flyui.mvcutils.hide(that._resultsPane);
		} 
		else if (newState == "READY") {
			flyui.mvcutils.hide(that._pendingPane);
			flyui.mvcutils.hide(that._messagePane);
			flyui.mvcutils.show(that._resultsSummaryPane);
			flyui.mvcutils.show(that._resultsPane);		
		}
		else if ( newState == "SERVERERROR" || newState == "UNEXPECTEDERROR" ) {
			flyui.mvcutils.hide(that._pendingPane);
			flyui.mvcutils.show(that._messagePane);
			flyui.mvcutils.hide(that._resultsSummaryPane);
			flyui.mvcutils.hide(that._resultsPane);			
		} 
		else {
			// this should never happen
			throw {name:"flyui.bdgp.ImageWidget.UnexpectedStateError", message:"Invalid state: "+newState};
		}
	};
	
	this._onErrorMessageChanged = function (oldErr, newErr){
		that._messagePane.innerHTML = newErr;
	};
	
	this._onResultsChanged = function(oldResults, newResults) {
		// render the results summary
		that._renderResultsSummary(that._query, newResults.length);
		
		if (newResults.length > 0) {
			
			// set the content
			that._resultsPane.innerHTML = CustomBdgpRenderer.imagesToDivHTML(newResults);
			
		}
		else {
			that._resultsPane.innerHTML = "";
		}
	};
	
	this._onQueryChanged = function (oldQuery, newQuery){
		// store the query
		that._query = newQuery;
	}
	
	/**
	 * @private
	 */
	this._init = function() {
		
		// set up the pending pane
		this._pendingPane = document.createElement("p");
		this._pendingPane.innerHTML = "pending...";
		this._containerPane.appendChild(this._pendingPane);
		flyui.mvcutils.hide(this._pendingPane);
		
		// set up the message pane
		this._messagePane = document.createElement("p");
		this._messagePane.innerHTML = "this should never be displayed";
		this._containerPane.appendChild(this._messagePane);
		flyui.mvcutils.hide(this._messagePane);
		
		// setup results summary pane
		this._resultsSummaryPane = document.createElement("p");
		this._containerPane.appendChild(this._resultsSummaryPane);
		flyui.mvcutils.hide(this._resultsSummaryPane);
		
		// set up results summary content
		this._resultsSummaryCountPane = document.createElement("span");
		this._resultsSummaryCountPane.innerHTML = "this should never be displayed";
		this._resultsSummaryQueryPane = document.createElement("span");
		this._resultsSummaryQueryPane.innerHTML = "this should never be displayed";
		this._resultsSummaryPane.appendChild(document.createTextNode("found "));
		this._resultsSummaryPane.appendChild(this._resultsSummaryCountPane);
		this._resultsSummaryPane.appendChild(document.createTextNode(" images for gene \""));
		this._resultsSummaryPane.appendChild(this._resultsSummaryQueryPane);
		this._resultsSummaryPane.appendChild(document.createTextNode("\""));
		
		// setup results pane
		this._resultsPane = document.createElement("div");
		this._containerPane.appendChild(this._resultsPane);
		flyui.mvcutils.hide(this._resultsPane);

	};
	
	// do initialisation
	this._init();
	
}

/**
 * connect listeners for any changes to the Model
 * TODO doc me
 */
CustomBdgpRenderer.prototype.connect = function( model ) {
	
	model.addListener("STATE", this._onStateChanged);
	model.addListener("QUERY", this._onQueryChanged);
	model.addListener("RESULTS", this._onResultsChanged);
	model.addListener("ERRORMESSAGE", this._onErrorMessageChanged);
};

CustomBdgpRenderer.prototype._renderResultsSummary = function( query, count ) {
	var content = "found ";
	content += count;
	content += " matching image";
	content += (count == 0 || count > 1) ? "s " : " ";
	content += "from <a href='http://www.fruitfly.org'>www.fruitfly.org</a> for ";
	if (query instanceof flyui.flybase.Gene) {
		content += "gene <strong>"+query.symbols.join(" / ")+"</strong> [<a href='http://www.fruitfly.org/cgi-bin/ex/bquery.pl?qtype=report&find="+query.annotationSymbols[0]+"&searchfield=CG'>BDGP gene report</a>]";
	} else {
		content += 	"query '"+query+"'";
	}
	this._resultsSummaryPane.innerHTML = content;
}


/**
 * TODO doc me
 */
CustomBdgpRenderer.imagesToDivHTML = function( images ) {
	
	// build the divs
	
	var content = "";
	for ( var i in images ) {
		
		content += CustomBdgpRenderer.imageToDivHTML(images[i]);
		log ("Generate the img div" + content, "test");	
	}
	
	return content;
};


/**
 * TODO doc me
 */
CustomBdgpRenderer.imageToDivHTML = function( image ) {
 	
 	//TODO include the caption
 	
 	var content = 	"<div class=\"result\">";
	content +=			"<a href=\"" + image.fullImageURL + "\">";
	content +=				"<img src=\"" + image.thumbnailURL + "\" alt=\"this is an image\">";
	content +=			"</img></a>"; 
	content +=		"</div>";
	
	return content;
};
 
